<template>
    <div class="holiday-scheduler-container">
        <!-- 年份和月份选择器 -->
        <div class="date-selector">
            <el-select v-model="selectedYear" placeholder="选择年份">
                <el-option v-for="year in availableYears" :key="year" :label="year + '年'" :value="year"></el-option>
            </el-select>
            <el-select v-model="selectedMonth" placeholder="选择月份">
                <el-option v-for="month in 12" :key="month" :label="month + '月'" :value="month"></el-option>
            </el-select>
            <el-button @click="toggleView">{{ viewType === 'month' ? '年' : '月' }}</el-button>
        </div>

        <!-- 日历标题（星期） -->
        <div class="calendar-header" v-if="viewType === 'month'">
            <div v-for="(weekDay, index) in weekDays" :key="index" class="header-item">
                {{ weekDay }}
            </div>
        </div>

        <!-- 日历主体 -->
        <div class="calendar-body" v-if="viewType === 'month'">
            <div v-for="(day, index) in days" :key="index" class="day-item" :class="{
                'current-day': isCurrentDay(day),
                'work-day': day.type === 'work',
                'rest-day': day.type === 'rest',
            }" @click="openDialog(day)">
                <span class="day-number">{{ day.date.getDate() }}</span>
                <span class="day-tag" :class="{ 'work-tag': day.type === 'work', 'rest-tag': day.type === 'rest' }">
                    {{ day.type === 'work' ? '班' : '休' }}
                </span>
            </div>
        </div>

        <!-- 年视图（简化展示，可根据需求扩展） -->
        <div class="year-view" v-else>
            <p>年视图内容，可根据需求详细设计</p>
        </div>

        <!-- 状态修改对话框 -->
        <el-dialog v-model="dialogVisible" title="修改日期状态" width="30%">
            <el-radio-group v-model="currentType">
                <el-radio :label="'work'">工作日</el-radio>
                <el-radio :label="'rest'">休息日</el-radio>
            </el-radio-group>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveChange">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 定义日期类型
interface DayItem {
  date: Date;
  type: 'work' | 'rest' | 'empty';
}

// 响应式数据
const selectedYear = ref<number>(new Date().getFullYear());
const selectedMonth = ref<number>(new Date().getMonth() + 1);
const viewType = ref<'month' | 'year'>('month');
const dialogVisible = ref<boolean>(false);
const currentDay = ref<DayItem | null>(null);
const currentType = ref<'work' | 'rest'>('work');

// 计算属性和辅助方法
const availableYears = computed(() => {
    const year = new Date().getFullYear();
    return [year - 1, year, year + 1];
});

const weekDays = ['一', '二', '三', '四', '五', '六', '日'];

const days = computed<DayItem[]>(() => {
    const daysInMonth: DayItem[] = [];
    const firstDay = new Date(selectedYear.value, selectedMonth.value - 1, 1);
    const lastDay = new Date(selectedYear.value, selectedMonth.value, 0);
    const firstDayIndex = firstDay.getDay() || 7; // 周日为0，转为7

    // 填充前面的空白天数
    for (let i = 1; i < firstDayIndex; i++) {
        daysInMonth.push({
            date: new Date(selectedYear.value, selectedMonth.value - 1, 1 - i),
            type: 'empty',
        });
    }

    // 填充当月天数
    for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(selectedYear.value, selectedMonth.value - 1, i);
        const dayOfWeek = date.getDay() || 7; // 周日为0，转为7
        const isWeekend = dayOfWeek === 6 || dayOfWeek === 7;
        daysInMonth.push({
            date,
            type: isWeekend ? 'rest' : 'work',
        });
    }

    return daysInMonth;
});

const isCurrentDay = (day: DayItem): boolean => {
    const today = new Date();
    return (
        day.date.getFullYear() === today.getFullYear() &&
        day.date.getMonth() === today.getMonth() &&
        day.date.getDate() === today.getDate()
    );
};

// 方法
const toggleView = () => {
    viewType.value = viewType.value === 'month' ? 'year' : 'month';
};

const openDialog = (day: DayItem): void => {
    if (day.type !== 'empty') {
        currentDay.value = day;
        currentType.value = day.type as 'work' | 'rest';
        dialogVisible.value = true;
    }
};

const saveChange = (): void => {
    if (currentDay.value) {
        currentDay.value.type = currentType.value;
        ElMessage.success('修改成功');
        dialogVisible.value = false;
    }
};

// 组件挂载时初始化
onMounted(() => {
    // 可在此处添加初始化逻辑，比如从接口获取假期数据等
});
</script>

<style scoped>
.holiday-scheduler-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.date-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.calendar-header {
    display: flex;
    margin-bottom: 10px;
}

.header-item {
    width: calc(100% / 7);
    text-align: center;
    font-weight: bold;
}

.calendar-body {
    display: flex;
    flex-wrap: wrap;
}

.day-item {
    width: calc(100% / 7);
    height: 100px;
    border: 1px solid #eee;
    box-sizing: border-box;
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.current-day {
    background-color: #e6f7ff;
}

.work-day {
    background-color: #f0f9eb;
}

.rest-day {
    background-color: #fff2f0;
}

.day-number {
    font-size: 16px;
}

.day-tag {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
}

.work-tag {
    background-color: #87d068;
    color: #fff;
}

.rest-tag {
    background-color: #ff4d4f;
    color: #fff;
}

.year-view {
    margin-top: 20px;
}
</style>